<template>
  <div class="call">
    <!--nav-->
    <div class="Nav">
      <Nav></Nav>
    </div>
    <!--/nav-->
    <div class="content">
      <!--关于我们-->
      <div class="about">
        <div class="about_content" >
          <i class="el-icon-collection-tag"></i>
          <span>关于我们</span>
        </div>
        <div class="img_content">
          <img src="../assets/call/call_img.jpg" alt="">
        </div>
        <div class="content_text" style="width: 900px;font-size: 15px;margin-top: 10px;color: gray">
          <span>该平台致力于给电影爱好者提供良好的界面和丰富的电影信息，基于Spring+Vue进行开发的烂白菜电影评价系统。</span><br>
          <span>游客可以浏览电影，观看电影详情。进行注册后可以进行评价、评分和提交意见反馈到后台系统。</span>
        </div>
      </div>
      <!--联系我们-->
      <div class="us" style="float: left;margin-top: 400px;margin-left: 110px;width: 650px;height: 500px;">
        <div>
          <i class="el-icon-phone"></i>
          <span>联系我们</span>
        </div>
        <!--地址-->
        <div class="adress" style="margin-top: 10px;color: gray">
          <span>地址：湖南省长沙市湖南科技职业学院暮云校区软件学院</span>
        </div>
        <!--电话-->
        <div class="phone" style="margin-top: 20px;color:gray;">
          <span>电话：15973945155</span>
        </div>
        <!--邮箱-->
        <div class="email" style="margin-top: 20px;color: gray">
          <span>邮箱：861051065@qq.com</span>
        </div>
        <!--高德地图-->
        <div class="map">
          <div class="amap-page-container">
            <el-amap
              vid="amapDemo"
              :center="center"
              :zoom="zoom"
              :plugin="plugin"
              class="amap-demo"
              :events="events"
              pitch-enable="false"
            >
              <el-amap-marker
                v-for="(marker,index) in markers"
                :key="index"
                :events="marker.events"
                :position="marker.position"
              />
              <el-amap-info-window
                v-if="window"
                :position="window.position"
                :visible="window.visible"
                :content="window.content"
                :offset="window.offset"
                :close-when-click-map="true"
                :is-custom="true"
              >
                <div id="info-window">
                  <p>{{ window.address }}</p>
                  <div class="detail" @click="checkDetail">查看详情</div>
                </div>
              </el-amap-info-window>
            </el-amap>
          </div>
        </div>
      </div>
    </div>

    <!--Footer-->
    <div class="footer" style="">
      <Footer></Footer>
    </div>
    <!--/Footer-->
  </div>

</template>

<script>
  import Nav from "../components/Nav";
  import Footer from "../components/Footer";
  export default {
    name: "Call",
    data: function () {
      const self = this;
      return {
        data: [
          {
            position: "112.988408, 27.999467",
            address: "另一个地址",
          },
          {
            position: "112.988408, 27.999467",
            address: "湖南省长沙市湖南科技职业学院暮云校区软件学院",
          },
        ],
        zoom: 10,
        center: [112.988408, 27.999467],
        markers: [],
        windows: [],
        window: "",
        events: {
          click(e) {
            const { lng, lat } = e.lnglat;
            self.lng = lng;
            self.lat = lat;
          },
        },
        lng: 0,
        lat: 0,

        /*一些工具插件*/

        plugin: [
          {
            pName: "DistrictSearch",
            events: {
              init(o) {
                console.log(o);
              },
            },
          },
          {
            // 定位
            pName: "Geolocation",
            events: {
              init(o) {
                // o是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    // 设置经度
                    self.lng = result.position.lng;
                    // 设置维度
                    self.lat = result.position.lat;
                    // 设置坐标
                    self.center = [self.lng, self.lat];
                    self.markers.push([self.lng, self.lat]);
                    // load
                    self.loaded = true;
                    // 页面渲染好后
                    self.$nextTick();
                  }
                });
              },
            },
          },
          {
            // 工具栏
            pName: "ToolBar",
            events: {
              init(instance) {
                // console.log(instance);
              },
            },
          },
          {
            // 鹰眼（暂且没用到）
            pName: "OverView",
            events: {
              init(instance) {
                // console.log(instance);
              },
            },
          },
          {
            // 地图类型
            pName: "MapType",
            defaultType: 0,
            events: {
              init(instance) {
                // console.log(instance);
              },
            },
          },
          {
            // 搜索（暂且没用到）
            pName: "PlaceSearch",
            events: {
              init(instance) {
                // console.log(instance)
              },
            },
          },
        ],
      };
    },
    mounted() {
      this.point();
    },
    methods: {
      point() {
        const markers = [];
        const windows = [];
        const that = this;
        this.data.forEach((item, index) => {
          markers.push({
            position: item.position.split(","),
            // icon:item.url, //不设置默认蓝色水滴
            events: {
              click() {
                // 方法：鼠标移动到点标记上，显示相应窗体
                that.windows.forEach((window) => {
                  window.visible = false; // 关闭窗体
                });
                that.window = that.windows[index];
                that.$nextTick(() => {
                  that.window.visible = true;
                });
              },
            },
          });
          windows.push({
            position: item.position.split(","),
            isCustom: true,
            offset: [115, 55], // 窗体偏移
            showShadow: false,
            visible: false, // 初始是否显示
            address: item.address,
          });
        });
        //  加点
        this.markers = markers;
        // 加弹窗
        this.windows = windows;
      },
      checkDetail() {
        alert("湖南省长沙市湖南科技职业学院暮云校区软件学院");
      },
    },
    components:{
      Nav,
      Footer
    }
  }
</script>

<style scoped>

  /*高德*/
  .amap-page-container{
    margin-top: 10px;
    width: 650px;
    height: 400px;
    border: 1px solid gray;
  }

  .amap-page-container {
    position: relative;
  }

  #info-window {
    width: 211px;
    height: 146px;
    margin-left: 30px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }

  .detail {
    width: 100%;
    height: 24px;
    color: #fff;
    background-color: #1a73e8;
    position: absolute;
    bottom: 0;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
  }
  /*高德*/


  .us i{
    color: skyblue;
  }
  .content_text{
    margin-left: 60px;
  }

  .img_content img{
    border-radius: 10px;
    width: 650px;
    height: 300px;
  }

  .img_content{
    padding: 10px;
    width: 800px;
    height: 300px;
    margin-left: 100px;
  }
  .about{
    width: 200px;
    height: 30px;
  }
  .about_content{
    margin-left: 100px;
  }

  .about i{
    color: skyblue;
  }
  .content{
    padding: 20px;
    width: 880px;
    height: 1000px;
    margin-top: 20px;
    margin-left: 320px;
    background-color: white;
    margin-bottom: 27px;
    border-radius: 5px;
  }
  .call{
    width: 100%;
    height: 1188px;
    background-color: rgba(238,236,237,0.94);
  }
</style>
